<template>
   <div>
      <el-card class="page-tools">
         <el-row type="flex" justify="space-between" align="middle">
            <!-- 前插槽 -->
            <el-col>
               <!-- 组件可以显示左侧内容，也可以显示右侧内容 
               如果左侧内容不传，图标不应该显示 -->
               <!-- 图标随着 showBefore 显示而显示 -->
               <div class="before" v-if="showBefore">
                  <!-- 默认图标 -->
                  <i class="el-icon-info"></i>
                  <slot name="before"></slot>
               </div>
            </el-col>
            <!-- 后插槽 -->
            <el-col>
               <!-- 因为 el-row 默认 靠左，所以 再加一个 el-row justify="end" 靠右-->
               <el-row type="flex" justify="end">
                  <slot name="after"></slot>
               </el-row>
            </el-col>
         </el-row>
      </el-card>
   </div>
</template>

<script>
export default {
   props: {
      showBefore: {
         type: Boolean,
         default: false
      }
   }
}
</script>

<style lang="scss" scoped>
.page-tools {
   margin: 10px 0;
   .before {
      line-height: 34px;
      i {
         margin-right: 5px;
         color: #409eff;
      }
      display: inline-block;
      padding: 0px 10px;
      border-radius: 3px;
      border: 1px solid rgba(145, 213, 255, 1);
      background: rgba(230, 247, 255, 1);
   }
}
</style>
